<template>
    <div class="activity-add">
        <el-form ref="form" :model="form" label-width="120px" label-position="left">
            <el-form-item label="活动名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="活动封面">
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="活动最大人数">
                <el-input-number v-model="value8" :min="1" :max="99999999" label="描述文字"></el-input-number>
            </el-form-item>
            <el-form-item label="单人购票数">
                <el-input-number v-model="value8" :min="1" :max="99999999" label="描述文字"></el-input-number>
            </el-form-item>
            <el-form-item label="推荐值">
                <el-slider v-model="value8"></el-slider>
            </el-form-item>
            <el-form-item label="活动位置">
                <el-cascader placeholder="试试搜索：指南" :options="options" filterable change-on-select size="medium" style="width:400px"></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="是否公开">
                <el-switch v-model="form.delivery"></el-switch>
                <div>
                    公开的活动LK平台将推广<br/>
                    不公开的活动通过活动连接报名
                </div>
            </el-form-item>
            <el-form-item label="活动类型">
                <el-radio-group v-model="form.resource">
                    <el-radio label="1">线下</el-radio>
                    <el-radio label="2">线上</el-radio>
                </el-radio-group>
            </el-form-item>

            <!-- 1时间段 2每天 3每一周的一天 4每一个月的一天 -->
            <el-form-item label="活动时间">
                <el-radio-group v-model="form.resource">
                    <el-radio label="1">时间段</el-radio>
                    <el-radio label="2">每天</el-radio>
                    <el-radio label="3">每一周</el-radio>
                    <el-radio label="4" disabled >每个月</el-radio>
                </el-radio-group>
                <div class="date" v-show="form.resource==1">
                    <el-date-picker v-model="value4" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div class="date" v-show="form.resource==2">
                    <el-time-picker is-range v-model="value4" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
                    </el-time-picker>
                </div>
                <div class="date" v-show="form.resource==3">
                    <el-select v-model="value" placeholder="请选择星期">
                        <el-option v-for="item in xq" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-time-picker is-range v-model="value4" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
                    </el-time-picker>
                </div>
                <div class="date" v-show="form.resource==4">
                </div>
            </el-form-item>

            <el-form-item label="票种" class="mp">
                <el-button type="primary" icon="el-icon-circle-plus-outline" circle @click="addMp()"></el-button>
                <el-form :inline="true"  class="demo-form-inline" v-for="(item,index) of mp" :key="index">
                  <el-form-item label="门票名">
                    <el-input  v-model="item.name" placeholder="请输入门票名"></el-input>
                  </el-form-item>
                  <el-form-item label="价格">
                    <el-input v-model="item.price" placeholder="请输入价格"></el-input>
                  </el-form-item>
                  <el-form-item label="备注">
                    <el-input v-model="item.desc" placeholder="请输入备注"></el-input>
                  </el-form-item>
                  <span class="del" @click="delMp(index)">删除</span>
                </el-form>
            </el-form-item>

            <el-form-item label="人员安排" class="ry">
                <el-button type="primary" icon="el-icon-document" circle @click="dialogTableVisible = true"></el-button>

                <el-form :inline="true"  class="demo-form-inline" v-for="(item,index) of mp" :key="index">
                  <span class="info">游杰 电话:13135317456 邮箱:youjie2015@126.com</span>
                  <el-form-item label="负责">
                    <el-input v-model="item.desc" placeholder="请输入备注"></el-input>
                  </el-form-item>
                  <span class="del" @click="delMp(index)">删除</span>
                </el-form>

                <el-dialog title="人员安排" :visible.sync="dialogTableVisible">
                  <el-table :data="userData" style="width: 100%">
                    <el-table-column property="id" label="日期"></el-table-column>
                    <el-table-column property="name" label="姓名"></el-table-column>
                    <el-table-column property="phoneNumber" label="电话"></el-table-column>
                    <el-table-column property="email" label="邮箱"></el-table-column>
                    <el-table-column
                      fixed="right"
                      label="操作"
                      width="120">
                      <template slot-scope="scope">
                        <el-button
                          @click.native.prevent="deleteRow(scope.$index, tableData4)"
                          type="text"
                          size="small">
                          添加
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-dialog>
             </el-form-item>
            
            <el-form-item label="活动标签">
                <el-checkbox-group v-model="form.type">
                    <el-checkbox label="美食" name="type"></el-checkbox>
                    <el-checkbox label="旅游" name="type"></el-checkbox>
                    <el-checkbox label="校园" name="type"></el-checkbox>
                    <el-checkbox label="户外" name="type"></el-checkbox>
                    <el-checkbox label="亲子" name="type"></el-checkbox>
                    <el-checkbox label="访谈" name="type"></el-checkbox>
                    <el-checkbox label="美食" name="type"></el-checkbox>
                    <el-checkbox label="旅游" name="type"></el-checkbox>
                    <el-checkbox label="校园" name="type"></el-checkbox>
                    <el-checkbox label="户外" name="type"></el-checkbox>
                    <el-checkbox label="亲子" name="type"></el-checkbox>
                    <el-checkbox label="访谈" name="type"></el-checkbox>
                </el-checkbox-group>
                <div class="tip">
                    注意该活动需要收集： 学校，年级， 班级 等信息   
                </div>
            </el-form-item>
            <div class="desc">
                <mavon-editor v-model="value" />
            </div>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>
<script>
// @ 是 /src 的别名
export default {
    name: 'ActivityAdd',
    props: {

    },
    data() {
        return {
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '1',
                desc: ''
            },
            value: '',
            value8: 10,
            options: [{
                value: 'hn',
                label: '湖南省',
                children: [{
                    value: 'cs',
                    label: '长沙',
                    children: [{
                        value: 'kf',
                        label: '开福区'
                    }]
                }, {
                    value: 'xt',
                    label: '湘潭',
                    children: [{
                        value: 'yh',
                        label: '雨湖区'
                    }]
                }]
            }],
            value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            xq: [{
                value: '1',
                label: '星期一'
            }, {
                value: '2',
                label: '星期二'
            }, {
                value: '3',
                label: '星期三'
            }, {
                value: '4',
                label: '星期四'
            }, {
                value: '5',
                label: '星期五'
            }],
            mp:[
                {name:'',price:'',desc:''}
            ],
            // 工作人员安排
            dialogTableVisible: false,
            userData: [{
                id:1,
                name: 'youjie',
                phoneNumber: '1234564897',
                email: 'youjie2015@126.com'

            }]
        }
    },
    methods: {
        onSubmit() {
            console.log('submit!');
        },
        addMp(){
            this.mp.push(
                {name:'',price:'',desc:''}
            )
        },
        delMp(index) {
            if(this.mp.length==1) {
                this.$notify.error({
                  title: '错误',
                  message: '至少要有一张入场券'
                });
                return
            }
            this.mp.splice(index, 1)
        }
    }
}
</script>
<style scoped lang="styl">
@import '../../assets/css/base'

.v-note-wrapper 
    width 100% 
    height 600px
.desc
    margin 20px 0
.mp
.ry
    position relative
    button
        position absolute
        top 0
        right 20px
    .demo-form-inline
        margin-bottom 10px
    .del 
        padding 0 10px
        color $Danger
        cursor pointer
    .info 
        margin-right 10px
.tip
    color $Warning
    font-size 16px
/* 上传图片样式 */
.activity-add >>> .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
 .activity-add >>> .avatar-uploader  .el-upload:hover {
    border-color: #409EFF;
  }
.activity-add >>>  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
 .activity-add >>> .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>